<template>
    <div ref="chart" style="width: 100%; height: 100%;"></div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  export default {
    props: {
      keyword: {
        type: String,
        required: true
      },
      dataArray: {
        type: Array,
        required: true
      }
    },
    data() {
        return {
        myChart: null, // 用于保存 ECharts 实例
        };
    },
    mounted() {
        // 初始化 ECharts 实例
        this.myChart = echarts.init(this.$refs.chart);
        this.renderChart();
    },
    watch: {
        // 监听 keyword 变化
        keyword() {
        this.renderChart();
        },
        // 监听 dataArray 变化
        dataArray: {
        handler() {
            this.renderChart();
        },
        deep: true, // 深度监听，确保数组内部变化也能触发
        },
    },
    methods: {
        renderChart() {
            const chartDom = this.$refs.chart;
            const myChart = echarts.init(chartDom);

            // 构建节点和边的数据
            const nodes = [];
            const links = [];

            // 添加中心节点（keyword）
            nodes.push({
                id: this.keyword,
                name: this.keyword,
                symbolSize: 30, // 中心节点大小
                category: 0, // 中心节点类别
                label: {
                    show: true,
                    position: 'top',
                    fontSize: 12,
                },
            });

            // 添加第一层节点（与 keyword 直接关联的概念）
            this.dataArray[0].forEach((concept) => {
                nodes.push({
                id: concept,
                name: concept,
                symbolSize: 20, // 第一层节点大小
                category: 1, // 第一层节点类别
                
                });
                // 添加边（keyword -> 第一层节点）
                links.push({
                source: this.keyword,
                target: concept,
                });
            });

            // 添加其他层节点（与第一层节点关联的概念）
            for (let i = 1; i < this.dataArray.length; i++) {
                this.dataArray[i].forEach((concept) => {
                if (!nodes.find((node) => node.id === concept)) {
                    nodes.push({
                    id: concept,
                    name: concept,
                    symbolSize: 15, // 其他层节点大小
                    category: 2, // 其他层节点类别
                    });
                }
                // 添加边（第一层节点 -> 其他层节点）
                links.push({
                    source: this.dataArray[0][i-1], // 上一层的节点
                    target: concept,
                });
                });
            }

            // 配置 ECharts 图谱
            const option = {
                title: {
                // text: '知识图谱',
                // subtext: `中心节点: ${this.keyword}`,
                left: 'center',
                },
                tooltip: {},
                animationDurationUpdate: 1500,
                animationEasingUpdate: 'quinticInOut',
                series: [
                {
                    type: 'graph',
                    layout: 'force', // 使用力导向布局
                    legendHoverLink: true,
                    data: nodes,
                    links: links,
                    categories: [
                    { name: '中心节点' },
                    { name: '第一层节点' },
                    { name: '其他层节点' },
                    ],
                    roam: true, // 允许缩放和拖拽
                    label: {
                    show: true,
                    position: 'top',
                    fontSize: 10,
                    },
                    lineStyle: {
                    color: 'source',
                    curveness: 0,
                    },
                    focus: 'adjacency',
                    force: {
                    repulsion: 50, // 节点之间的斥力
                    edgeLength: 50, // 边的长度
                    },
                    draggable:true,
                },
                ],
            };
            // 渲染图表
            myChart.setOption(option);
        }
    }
  }
  </script>
  
  <style scoped>
  /* 你可以在这里添加一些样式 */
  </style>